<template>
  <div>
    <div>
      <span>订单号</span
      ><el-input
        style="width: 168px; margin-left: 10px"
        placeholder="订单号"
      /><span style="margin-left: 10px">收货人</span
      ><el-input style="width: 168px; margin-left: 10px" placeholder="收货人" />
       <span tyle="margin-left:10px margin-left:10px" >手机号</span
      ><el-input style="width: 168px; margin-left: 10px" placeholder="手机号" />

      <span style="margin-left: 10px">订单状态</span>
      <el-select
        v-model="region"
        placeholder="请选择"
        style="width: 168px; margin-left: 10px"
      >
        <el-option label="已完成" value="已完成"></el-option>
        <el-option label="末完成" value="末完成"></el-option>
      </el-select>
      <el-button style="margin-left: 20px" type="primary">查询</el-button>
    </div>
    <div style="margin-top: 20px">
      <span>选择时间</span>
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        style="margin-left: 10px"
      >
      </el-time-picker>

      <el-table :data="list" style="margin-top: 10px">
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="下单时间" prop="orderTime"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="收货人" prop="consignee"></el-table-column>
        <el-table-column
          label="配送时间"
          prop="deliverAddress"
        ></el-table-column>
        <el-table-column label="送达时间" prop="deliveryTime"></el-table-column>
        <el-table-column label="用户备注" prop="remarks"></el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
        <el-table-column label="订单状态" prop="orderState"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="funsee(scope.row.id)"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="funedit(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="pagechange"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 10px"
      >
      </el-pagination>
    </div>
    <!-- 查看编详情-->
    <el-dialog :visible.sync="showeditboard" width="20%">
      <el-form>
        <el-form-item label="订单号"
          ><span>{{ editobj.orderNo }}</span></el-form-item
        >
        <el-form-item label="下单号"
          ><span>{{ editobj.orderTime }}</span></el-form-item
        >
        <el-form-item label="手机号"
          ><span>{{ editobj.phone }}</span></el-form-item
        >
        <el-form-item label="收货人"
          ><span>{{ editobj.consignee }}</span></el-form-item
        >
        <el-form-item label="配送时间"
          ><span>{{ editobj.orderTime }}</span></el-form-item
        >
        <el-form-item label="收货地址"
          ><span>{{ editobj.deliverAddress }}</span></el-form-item
        >
        <el-form-item label="送达时间"
          ><span>{{ editobj.deliveryTime }}</span></el-form-item
        >
        <el-form-item label="用户备注"
          ><span>{{ editobj.remarks }}</span></el-form-item
        >
        <el-form-item label="订单金额"
          ><span>{{ editobj.orderAmount }}</span></el-form-item
        >
        <el-form-item label="订单状态"
          ><span>{{ editobj.orderState }}</span></el-form-item
        >
      </el-form>
    </el-dialog>
    <!-- 查看编辑 -->
    <el-dialog :visible.sync="showedit" width="26%">
      <el-form inline>
        <el-form-item label="id"
          ><el-input v-model="editobj.id" style="margin-left: 40px"
        /></el-form-item>
        <el-form-item label="订单号"
          ><el-input v-model="editobj.orderNo" style="margin-left: 11px"
        /></el-form-item>
        <el-form-item label="下单时间"
          ><el-input v-model="editobj.orderTime"
        /></el-form-item>
        <el-form-item label="电话"
          ><el-input v-model="editobj.phone" style="margin-left: 26px"
        /></el-form-item>
        <el-form-item label="收货人"
          ><el-input v-model="editobj.consignee" style="margin-left: 12px"
        /></el-form-item>
        <el-form-item label="送货地址地址"
          ><el-input v-model="editobj.deliverAddress"
        /></el-form-item>
        <el-form-item label="送达时间"
          ><el-input v-model="editobj.deliveryTime"
        /></el-form-item>
        <el-form-item label="用户备注"
          ><el-input v-model="editobj.remarks"
        /></el-form-item>
        <el-form-item label="订单金额"
          ><el-input v-model="editobj.orderAmount"
        /></el-form-item>
        <el-form-item label="订单状态"
          ><el-input v-model="editobj.orderState"
        /></el-form-item>
      </el-form>
      <el-button @click="funsure" style="margin-left: 120px" type="primary"
        >确认修改</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { orderlist, orderdetail, orderedit } from "@/apis/order";
import { getYYYYMMDDHHMMSS } from "@/utils/utils";

export default {
  data() {
    return {
      region: "已完成",
      pagesize: 6, //请求的条数
      total: 1, //总条数
      showeditboard: false,
      showedit: false,

      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value: "",
      list: [],
      curpage: 1,
      editobj: {}, //编辑对象
      editrevise: {}, //修改对象
    };
  },
  created() {
    this.retable();
  },

  methods: {
    pagechange(page) {
      this.curpage = page;
      this.retable();
    },
    retable() {

      //判断节点流
      if(this.ordermanager){
        this.$message({
          message:'你的操作频换快'
        })
        return
      }
      //设置节点流
      this.ordermanager=true

      setTimeout(()=>{
        this.ordermanager=false
      },1500)
      orderlist({ currentPage: this.curpage, pageSize: this.pagesize }).then(
        (res) => {
          for (let obj of res.data.data) {
            obj.deliveryTime = getYYYYMMDDHHMMSS(obj.deliveryTime);
            obj.orderTime = getYYYYMMDDHHMMSS(obj.orderTime);
          }
          // console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    //点击查看  获取详情
    funsee(id) {
      // console.log(id);
      orderdetail({ id: id }).then((res) => {
        res.data.data.deliveryTime = getYYYYMMDDHHMMSS(
          res.data.data.deliveryTime
        );
        res.data.data.orderTime = getYYYYMMDDHHMMSS(res.data.data.orderTime);
        this.editobj = res.data.data;
      });
      this.showeditboard = true;
    },

    //点击编辑 弹出修改框
    funedit(id) {
      this.funsee(id);
      this.myid = id;
      this.showedit = true;
      this.showeditboard = false;
    },

    //确认修改
    funsure() {
      let {
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      } = this.editobj;
      // console.log(this.myid,orderNo,orderTime,phone,consignee,deliverAddress,deliveryTime,remarks,orderAmount,orderState);
      orderedit({
        id: this.myid,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      }).then((res) => {
        if (res.data.code == 0) {
          this.showedit = false; //关窗
          this.$message({
            message: "订单修改成功!",
            type: "success",
          });

          this.retable(); //刷新表格数据
        }
      });
    },
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  line-height: 20px;
}
.el-card {
  min-width: 1100px;
}
</style>